<html lang="en">

<head>
    <title>乐摩吧-导出</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <!-- <link href="css/mui.min.css" rel="stylesheet" /> -->

    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="css/foundation.min.css" rel="stylesheet" type="text/css">
    <link href="css/foundation-datepicker.css" rel="stylesheet" type="text/css">

    <link href="css/reset.css" rel="stylesheet" />
    <!-- <link href="css/index.css" rel="stylesheet" /> -->
    <link href="css/weui.min.css" rel="stylesheet" />
    <style>
        select {
            padding: 0 !important;
        }
        table{
            width:100%;
        }
        .font13 {
            font-size: 13px;
        }

        .input-border1 {
            border: 1px solid rgb(169, 169, 169);
        }

        .pstyle {
            display: block;
            float: left;
            line-height: 2rem;
        }

        .forms {
            height: 80px;
            padding: 32px;
        }

        .forms>ul,
        .forms>ul li {
            float: left;
            display: block;
            /* width: 20%; */
        }

        .areaname {
            display: block;
            float: left;
            width: 84px;
            line-height: 30px;
        }

        .footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            padding: 10px;
            text-align: center;
            color: #ddd;
            font-size: 12px;
            background-color: #eaeaea;
        }

        .container {
            margin: 0 auto;
            max-width: 1060px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="viewport-pc">
        <div class="container" id="tab">
            <div class="forms">
                <ul>
                    <li style="width:180px;">
                        <p class="font13 pstyle">类型：</p>
                        <select name="" id="pageType" class="font13" style="width:100px;" onchange='demoStatus(this[selectedIndex].value);'>
                            <option value="0">请选择...</option>
                            <option value="1">巡场签到</option>
                            <option value="2">故障申报</option>
                            <option value="3">检修登记</option>
                        </select>
                    </li>

                    <!-- <li style="width:280px;">
                        <p class="font13 pstyle">运维人员：</p>
                        <input type="text" id="fixName" class="input-border1">
                    </li>
                    <li style="width:280px;">
                        <p class="areaname textright font13 pstyle">区域名称：</p>
                        <select name="请选择" id="zonename" style="height:30px;width:190px;" class="font13" onchange='chooseArea(this[selectedIndex].value);'>
                            <option value="0">请选择...</option>
                            <option value="1">台江</option>
                            <option value="2">万宝商圈</option>
                            <option value="3">鼓楼</option>
                            <option value="4">晋安区</option>
                            <option value="5">仓山</option>
                            <option value="6">闽侯</option>
                            <option value="7">闽清</option>
                            <option value="8">福清</option>
                            <option value="9">马尾</option>
                            <option value="10">平潭</option>
                            <option value="11">长乐</option>
                            <option value="12">连江</option>
                        </select>
                        <input id="zoneName" type="hidden" value="">
                    </li>
                    <li>
                        <p class="areaname textright font13 pstyle">网点名称：</p>
                        <select name="请选择" id="areaname" class="font13" style="height:30px;">
                                    <option value="0">请选择...</option>
                                </select>
                    </li> -->
                    <li style="width:300px;">
                        <p class="font13 pstyle">提报时间：</p>
                        <input type="text" class="input-border1" id="demo-1" style="float:left;width:100px;"><span style="float:left;">&nbsp; -&nbsp;&nbsp; </span>
                        <input
                            type="text" class="input-border1" id="demo-2" style="float:left;width:100px;">
                    </li>
                    <li style="width:50px;display:block;text-align:center;" class="input-border1" onclick="searchClick()">
                        <p class="font13 pstyle " style="float:none;cursor:pointer;">查询</p>
                    </li>
                    <li style="width:50px;display:block;text-align:center;margin-left:10px;" class="input-border1" onclick="exportClick()">
                        <p class="font13 pstyle " style="float:none;cursor:pointer;">导出</p>
                    </li>
                </ul>
            </div>
            <div class="tables" id="demo1">
                <table>
                    <thead id="thead1">
                        <tr>
                            <th>申报人</th>
                            <th>区域名称</th>
                            <th>网点名称</th>
                            <th width='100'>现场设备数</th>
                            <th width='100'>巡场反馈</th>
                        </tr>
                    </thead>
                    <tbody id="tbody1">
                    </tbody>
                </table>
            </div>
            <div class="tables" id="demo2">
                <table>
                    <thead id="thead2">
                        <tr>
                            <th width='100'>申报人</th>
                            <th width='100'>区域名称</th>
                            <th>网点名称</th>
                            <th width='100'>设备ID</th>
                            <th>各类异常</th>
                            <th>异常反馈</th>
                        </tr>
                    </thead>
                    <tbody id="tbody2"  height="400">

                    </tbody>
                </table>
            </div>
            <div class="tables" id="demo3">
                <table>
                    <thead id="thead3">
                        <tr>
                            <th width='100'>申报人</th>
                            <th width='100'>区域名称</th>
                            <th>网点名称</th>
                            <th width='100'>设备ID</th>
                            <th>各类异常</th>
                            <th>异常反馈</th>
                        </tr>
                    </thead>
                    <tbody id="tbody3">

                    </tbody>
                </table>
            </div>
        </div>

        <div class="footer">
            2018乐摩物联 版权所有<br>闽ICP备12018069号-5
        </div>
        <div class="js_dialog" id="iosDialog2" style="display: none;z-index:100000;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">

                <div class="weui-dialog__bd" id="toastMsg"></div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="hideMsg()">知道了</a>
                </div>
            </div>
        </div>

        <div class="js_dialog" id="iosDialog1" style="display: none;z-index:100000;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title">是否删除图片</strong></div>
                <div class="weui-dialog__bd">确定删除当前图片吗？</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" onclick="cancelDetelePhoto()">取消</a>
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="sureDetelePhoto()">确定</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

<script src="js/weui.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/foundation-datepicker.js"></script>
<script src="js/foundation-datepicker.zh-CN.js"></script>
<script>
    $(function () {
        $("#demo1").css({"display":"none"});
        $("#demo2").css({"display":"none"});
        $("#demo3").css({"display":"none"});
        $('#demo-1').fdatepicker({
            format: 'yyyy-mm-dd',
        });
        $('#demo-2').fdatepicker({
            format: 'yyyy-mm-dd',
        });
    })

    function showMsg(msg) {
        $('#iosDialog2').css({
            'display': 'block'
        });
        $('#toastMsg').text(msg);
    }

    function hideMsg(msg) {
        $('#iosDialog2').css({
            'display': 'none'
        });
        $('#toastMsg').text('');
    }
    //巡场签到
    var url = '';
    var surl = '';
    var flag = 0;

    function demoStatus(types) {
        switch (types) {
            case '1':
                url = '/api/v1/queryPatrolPlaceDemo';
                surl = '/api/v1/patrolPlaceDemoExport';
                $("#demo1").css({"display":"block"});
                $("#demo2").css({"display":"none"});
                $("#demo3").css({"display":"none"});
                break;
            case '2':
                url = '/api/v1/queryServicingDemo';
                surl = '/api/v1/servicingDemoExport';
                $("#demo1").css({"display":"none"});
                $("#demo2").css({"display":"block"});
                $("#demo3").css({"display":"none"});
                break;
            case '3':
                url = '/api/v1/queryCheckFixDemo';
                surl = '/api/v1/checkFixDemoExport';
                $("#demo1").css({"display":"none"});
                $("#demo2").css({"display":"none"});
                $("#demo3").css({"display":"block"});
                break;
            default:
                break;
        }
        flag = types;
    }

    function searchClick() {

        var str1 = $("#demo-1").val().replace(/-/g, '');
        var str2 = $("#demo-2").val().replace(/-/g, '');
        var strs = str1 + ' ' + str2;
        var data = {
            time: strs
        };
        if(flag == 0){
            alert('请选择需要查询的类型！');
            return;
        }
        if (data.time == ' ') {
            alert('查询时间不能为空！');
            return;
        } else {
            $.ajax({
                type: "get",
                url: 'http://h5.test.sale.lemobar.cn' + url,
                data: data,
                // cache: false,
                //async: false,
                dataType: "json",
                success: function (response) {
                    var obj = [];
                    obj = response.data;
					console.log(obj)
                    if (response.code == 1) {
                        var html = "";
                        for(var i = 0; i < obj.length; i++){
                            if (flag == 1) {
                                html = "<tr>";
                                html += "<td>" + obj[i].createPersion + "</td>";
                                html += "<td>" + obj[i].latticePoint + "</td>";
                                html += "<td>" + obj[i].area + "</td>";
                                html += "<td>" + obj[i].amount + "</td>";
                                html += "<td>" + obj[i].feedBack + "</td>";
                                html += "</tr>";
                                $("#tbody1").show().append(html);
                            } else if (flag == 2) {
                                html = "<tr>";
                                html += "<td>" + obj[i].createPersion + "</td>";
                                html += "<td>" + obj[i].latticePoint + "</td>";
                                html += "<td>" + obj[i].area + "</td>";
                                html += "<td>" + obj[i].deviceId + "</td>";
                                html += "<td>" + obj[i].breakSeason + "</td>";
                                html += "<td>" + obj[i].breakDescribe + "</td>";
                                html += "</tr>";
                                $("#tbody2").show().append(html);
                            } else if (flag == 3) {
                                html = "<tr>";
                                html += "<td>" + obj[i].createPersion + "</td>";
                                html += "<td>" + obj[i].latticePoint + "</td>";
                                html += "<td>" + obj[i].area + "</td>";
                                html += "<td>" + obj[i].deviceId + "</td>";
                                html += "<td>" + obj[i].breakSeason + "</td>";
                                html += "<td>" + obj[i].breakDescribe + "</td>";
                                html += "</tr>";
                                $("#tbody3").show().append(html);
                            }
                        }
                        // setTimeout(function () {
                        //     window.location.reload();
                        // }, 3000)
                    } else {
                        showMsg("提交失败", 1);
                    }
                },
                error: function (data, text) {

                    console.log(data);
                }
            });
        }
    }

    function exportClick() {
        
        var str1 = $("#demo-1").val().replace(/-/g, '');
        var str2 = $("#demo-2").val().replace(/-/g, '');
        var strs = str1 + ' ' + str2;
        var data = {
            time: strs
        };
        if(flag == 0){
            alert('请选择需要查询的类型！');
            return;
        }
        if (data.time == ' ') {
            alert('查询时间不能为空！');
            return;
        } else {
            window.location.href = 'http://h5.test.sale.lemobar.cn' + surl + '?time=' + strs;
            // $.ajax({
            //     type: "get",
            //     url: 'http://h5.test.sale.lemobar.cn' + surl,
            //     data: data,
            //     // cache: false,
            //     //async: false,
            //     dataType: "json",
            //     success: function (response) {
            //         var obj = [];
            //         obj = response.data;
            //         if (response.code == 1) {
            //             alert('下载成功！');
            //         } else {
            //             showMsg("提交失败", 1);
            //         }
            //     },
            //     error: function (data, text) {

            //         console.log(data);
            //     }
            // });
        }
    }



    var ids = '';
    //取消删除图片
    function cancelDetelePhoto() {
        $('#iosDialog1').css({
            'display': 'none'
        });
        // document.getElementById('iosDialog1').style = 'display:none';
    }

    //确定删除图片
    function sureDetelePhoto() {
        var photoAdd = document.getElementById('mm');
        $('#' + ids).remove();
        var imgContent = document.querySelectorAll('#touchImg>img').length; //当前的图片数

        if ((imgContent) == 9) {
            photoAdd.style = 'display:none';
        } else {
            photoAdd.style = 'display:block;float:left;';
        }
        $('#iosDialog1').css({
            'display': 'none'
        });
    }

    function deletePhoto(obj) {
        $('#iosDialog1').css({
            'display': 'block'
        });
        // document.getElementById('iosDialog1').style = 'display:block';
        ids = obj.currentTarget.id;

    }

    function isInt(val) {
        var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字     //判断正整数 /^[1-9]+[0-9]*]*$/   
        if (re.test(val)) {
            if (val % 1 === 0) {
                return true;
            } else {
                return false;
            }
        } else {
            return false;
        }
    }
</script>